


AO3 workskin for kakaotalk

by beherrscht



Series: in which jamie codes instead of writing [1]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Korean Culture Propaganda
Language: English
Status: Completed
Published: 2020-12-20
Updated: 2020-12-20
Packaged: 2021-03-10 19:27:18
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,212
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/28192422
Author URL: https://archiveofourown.org/users/beherrscht/pseuds/beherrscht
Summary: Yes, that yellow Korean texting messenger app.
Series: in which jamie codes instead of writing [1]
Series URL: https://archiveofourown.org/series/2065329
Comments: 2
Kudos: 9
Collections: A Guide to Coding and Fanworks





	AO3 workskin for kakaotalk

Raizel

Raizel, listen.

Raizel  
what is it?

Hypothetically, just hyperthetically, if I suddenly turned into a catboy one day would you still love me

Raizel  
...

Thursday, December 10, 2010

Raizel  
Yes.

Did that need a whole day of thinking

  


[link to maker](https://mega.nz/folder/BFZRwKQD#U0QjPSkMmooE2czfYuk7RA)

if you don't trust suspicious executables, not that i have the skills to implement a virus, here are the css/html: 

CSS - default

#workskin .kakaotextbox {  
margin-left: auto;  
margin-right: auto;  
display: table;  
max-width: 500px;  
min-width: 500px;  
height: 700px;  
overflow: hidden;  
background-repeat: repeat;  
background-color: #9bbbd4;  
font-family: Helvetica Neue, Helvetica;  
}

#workskin .kkheader {  
display: table;  
max-width: 500px;  
min-width: 500px;  
min-height: 20px;  
max-height: 20px;  
background-color: #9bbbd4;  
margin-top: -45px;  
border-bottom: 2px solid gray;  
}

#workskin .kkroomtitle {  
font-style: helvetica;  
color: #1a2632;  
font-weight: bold;  
font-size: 1.4em;  
padding-top: 0.01em;  
}

#workskin img.titleiconl {  
float: left;  
height: 20px;  
width: 20px;  
padding-left: 30px;  
padding-right: 30px;  
padding-top: 5px;  
}

#workskin img.titleiconl:hover {  
cursor: pointer;  
}

#workskin img.titleiconr {  
float: right;  
height: 25px;  
width: 25px;  
padding-right: 25px;  
}

#workskin img.titleiconr:hover {  
cursor: pointer;  
}

#workskin .kkmsg {  
border-top: 2px solid gray;  
margin-top: -10px;  
width: 100%;  
overflow: auto;  
display: block;  
height: 700px;  
background-color: #9bbbd4;  
/* adding [background-image: url("link");] here allows you to add a background image.*/  
}

#workskin .kkmsg::-webkit-scrollbar {  
-webkit-appearance: none;  
}

#workskin .kkmsg::-webkit-scrollbar:vertical {  
width: 8px;  
}

#workskin .kkmsg::-webkit-scrollbar-thumb {  
background-color: rgba(0, 26, 51, 0.5);  
border-radius: 8px;  
}

#workskin .kkmsg::-webkit-scrollbar-track {  
border-radius: 8px;  
background-color: #ffffff transparent;  
}

#workskin .kkmsg::-webkit-scrollbar-track {  
background-color: rgba(255, 255, 255, 0.5);  
border-radius: 8px;  
}

#workskin .timestamp {  
clear: both;  
display: table;  
margin: auto;  
margin-top: -0.25em;  
color: white;  
border-radius: 1em;  
background-color: rgba(0, 0, 0, 0.5);  
max-width: 50%;  
position: relative;  
padding: 0.5em 1em;  
font-size: 0.9em;  
}

#workskin .sentmsg {  
clear: left;  
float: right;  
background: #fff942;  
border-radius: 1em;  
max-width: 70%;  
position: relative;  
padding: 0.55em;  
line-height: 1.25;  
margin-right: 0.5em;  
margin-bottom: 0.5em;  
}

#workskin .sentmsg::after {  
content: "";  
position: absolute;  
width: 0.5em;  
height: 1em;  
right: -0.5em;  
top: 0;  
border-left: 0.5em solid #fff942;  
border-top-left-radius: 1em 0.5em;  
}

#workskin .sentmsg2 {  
clear: both;  
float: right;  
color: black;  
background: #fff942;  
border-radius: 1em;  
max-width: 70%;  
position: relative;  
padding: 0.75em;  
line-height: 1.25;  
margin-right: 0.5em;  
margin-bottom: 0.5em;  
}

#workskin img.kkticon {  
display: table;  
width: 3.5em;  
height: 3.5em;  
float: left;  
position: relative;  
border-radius: 10px;  
margin-left: 10px;  
clear: both;  
}

#workskin .rccl {  
float: left;  
margin-left: 10px;  
max-width: 80%;  
}

#workskin .sentuser {  
font-weight: bold;  
font-size: 1.2em;  
clear: right;  
margin: left;  
}

#workskin .rcmsg {  
float: left;  
clear: both;  
color: black;  
background: white;  
border-radius: 1em;  
max-width: 90%;  
position: relative;  
padding: 0.55em;  
text-align: justify;  
text-justify: inter-word;  
line-height: 1.25;  
margin-left: 0.5em;  
margin-bottom: 0.5em;  
}

#workskin .rcmsg::after {  
content: "";  
position: absolute;  
width: 0.5em;  
height: 1em;  
left: -0.5em;  
top: 0;  
border-right: 0.5em solid white;  
border-top-right-radius: 1em 0.5em;  
}

#workskin .rcmsg2 {  
float: left;  
clear: both;  
color: black;  
background: #FFFFFF;  
border-radius: 1em;  
max-width: 70%;  
position: relative;  
padding: 0.75em;  
text-align: justify;  
text-justify: inter-word;  
line-height: 1.25;  
margin-left: 5em;  
margin-bottom: 0.5em;  
}

#workskin .kkfooter {  
display: table;  
max-width: 500px;  
min-width: 500px;  
background-color: #9bbbd4;  
}

#workskin img.footer {  
background-color: FFFFFF;  
width: 500px;  
}  


Example: 

Jamie

So what does this thing even do? 

Jamie  
It creates a neat kakaotalk skin for your fic. There's a program up at top that you can just put the texts into if you managed to miss it, btw. 

The default CSS skin incorporates the scrollbar like the actual program, but if you use the no-scrollbar version you don't get a scrollbar..

The toolbar is a little bit different from the one actually in tthe program, but that one's barely visible so I made it a bit thicker :) If that bugs anyone, you can fix it by setting the width of the bar to like, 5px and killing the border radius as well as the track. .

Thursday, December 20, 2020

Jamie  
There are also timestamps! 

Blah blah blah

Cool. Can I get to the HTML already?

Jamie  
No not yet :)

Adding more random text here so I can show off my super cool tool bar

Erga Kenesis di Raskreia please step on me

  


CSS - "i don't want scrollbars" edition

  
#workskin .kakaotextbox {  
margin-left: auto;  
margin-right: auto;  
display: table;  
max-width: 500px;  
min-width: 500px;  
overflow: hidden;  
background-repeat: repeat;  
background-color: #9bbbd4;  
font-family: Helvetica Neue, Helvetica;  
}

#workskin .kkheader {  
display: table;  
max-width: 500px;  
min-width: 500px;  
min-height: 20px;  
max-height: 20px;  
background-color: #9bbbd4;  
margin-top: -45px;  
border-bottom: 2px solid gray;  
}

#workskin .kkroomtitle {  
font-style: helvetica;  
color: #1a2632;  
font-weight: bold;  
font-size: 1.4em;  
padding-top: 0.01em;  
}

#workskin img.titleiconl {  
float: left;  
height: 20px;  
width: 20px;  
padding-left: 30px;  
padding-right: 30px;  
padding-top: 5px;  
}

#workskin img.titleiconl:hover {  
cursor: pointer;  
}

#workskin img.titleiconr {  
float: right;  
height: 25px;  
width: 25px;  
padding-right: 25px;  
}

#workskin img.titleiconr:hover {  
cursor: pointer;  
}

#workskin .kkmsg {  
border-top: 2px solid gray;  
margin-top: -10px;  
width: 100%;  
overflow: auto;  
display: block;  
background-color: #9bbbd4;  
/* adding [background-image: url("link");] here allows you to add a background image.*/  
}

#workskin .timestamp {  
clear: both;  
display: table;  
margin: auto;  
margin-top: -0.25em;  
color: white;  
border-radius: 1em;  
background-color: rgba(0, 0, 0, 0.5);  
max-width: 50%;  
position: relative;  
padding: 0.5em 1em;  
font-size: 0.9em;  
}

#workskin .sentmsg {  
clear: left;  
float: right;  
background: #fff942;  
border-radius: 1em;  
max-width: 70%;  
position: relative;  
padding: 0.55em;  
line-height: 1.25;  
margin-right: 0.5em;  
margin-bottom: 0.5em;  
}

#workskin .sentmsg::after {  
content: "";  
position: absolute;  
width: 0.5em;  
height: 1em;  
right: -0.5em;  
top: 0;  
border-left: 0.5em solid #fff942;  
border-top-left-radius: 1em 0.5em;  
}

#workskin .sentmsg2 {  
clear: both;  
float: right;  
color: black;  
background: #fff942;  
border-radius: 1em;  
max-width: 70%;  
position: relative;  
padding: 0.75em;  
line-height: 1.25;  
margin-right: 0.5em;  
margin-bottom: 0.5em;  
}

#workskin img.kkticon {  
display: table;  
width: 3.5em;  
height: 3.5em;  
float: left;  
position: relative;  
border-radius: 10px;  
margin-left: 10px;  
clear: both;  
}

#workskin .rccl {  
float: left;  
margin-left: 10px;  
max-width: 80%;  
}

#workskin .sentuser {  
font-weight: bold;  
font-size: 1.2em;  
clear: right;  
margin: left;  
}

#workskin .rcmsg {  
float: left;  
clear: both;  
color: black;  
background: white;  
border-radius: 1em;  
max-width: 90%;  
position: relative;  
padding: 0.55em;  
text-align: justify;  
text-justify: inter-word;  
line-height: 1.25;  
margin-left: 0.5em;  
margin-bottom: 0.5em;  
}

#workskin .rcmsg::after {  
content: "";  
position: absolute;  
width: 0.5em;  
height: 1em;  
left: -0.5em;  
top: 0;  
border-right: 0.5em solid white;  
border-top-right-radius: 1em 0.5em;  
}

#workskin .rcmsg2 {  
float: left;  
clear: both;  
color: black;  
background: #FFFFFF;  
border-radius: 1em;  
max-width: 70%;  
position: relative;  
padding: 0.75em;  
text-align: justify;  
text-justify: inter-word;  
line-height: 1.25;  
margin-left: 5em;  
margin-bottom: 0.5em;  
}

#workskin .kkfooter {  
display: table;  
max-width: 500px;  
min-width: 500px;  
background-color: #9bbbd4;  
}

#workskin img.footer {  
background-color: FFFFFF;  
width: 500px;  
}  


Example: 

Jamie

So what does this thing even do? 

Jamie  
It creates a neat kakaotalk skin for your fic. There's a program up at top that you can just put the texts into if you managed to miss it, btw. 

The default CSS skin incorporates the scrollbar like the actual program, but if you use the no-scrollbar version you don't get a scrollbar..

The toolbar is a little bit different from the one actually in tthe program, but that one's barely visible so I made it a bit thicker :) If that bugs anyone, you can fix it by setting the width of the bar to like, 5px and killing the border radius as well as the track. .

Thursday, December 20, 2020

Jamie  
There are also timestamps! 

Cool. Can I get to the HTML already?

  


by the way, if u want to use different images for backgrounds you MUST make a separate 'kkmsg' workskin function for each one. Add a code next to them so you won't forget, or something.

And finally, [HTML](https://pastebin.com/kZ5U63z3).

**Author's Note:**

> feel free 2 edit but if u ever use this trainwreck just source me thx <3 i will clean this up to make it look neater after my exam. that is. tomorrow x 
> 
> things to do later on  
> \- enable groupchat function (into the python code, since it's ez to do enough in the original html)  
> \- pinned posts  
> \- read receipt/time  
> \- polls?  
> \- dark theme  
> \- profiles  
> \- 'someone left the chat' / 'someone is invited into the chat' alerts  
> \- profiles, maybe


End file.
